<template id="login">
    <div>
        <div class="login_con">
            <div class="login_top">
                <img src="./image/blue_da.png" alt="" @click="getFan()">
                <h4>{{b1}}</h4>
            </div>
            <div  class="form_con">
                <!--手机号快捷登录-->
                <form action="" id="form" v-if="login1">
                    <p>
                        <input type="text" placeholder="手机号" v-model="login_mobile" class="test1">
                        <img src="./image/blue_phone.png" alt="">
                        <span id="VerCode" @click="getSmsCode(1, 'VerCode')">获取验证码</span>
                    </p>
                    <p>
                        <input type="text" placeholder="验证码" class="test" v-model="login_code">
                        <img src="./image/blue_yan.png" alt="">
                    </p>
                    <p>首次使用手机登录将自动为你注册，享受新客户专属折扣</p>
                    <p  @click="smsLogin()"><span v-bind:class="login_mobile && login_code ? 'selected' : ''">登录</span></p>
                    <p>
                        <span @click="getPwdLogin()" >账号密码登录/注册</span>
                        <span>未收到验证码？</span>
                    </p>
                </form>
                <!--密码登录-->
                <form action="" id="form_1" v-if="login2">
                    <p>
                        <input type="text" placeholder="手机号" v-model="login_mobile" class="test1">
                        <img src="./image/blue_phone.png" alt="">
                    </p>
                    <p>
                        <input v-bind:type="login_is_show ? 'text' : 'password'" placeholder="密码" v-model="login_pwd" class="test" >
                        <img src="./image/blue_psd.png" alt="">
                        <img src="./image/blue_yin.png" alt="" v-if="pwd_passd" @click="pwdIsShow(1)">
                        <img src="./image/kesi.png" alt="" v-if="pwd_psd" @click="pwdIsShow(1)">
                    </p>
                    <p><span @click="pwdLogin()" v-bind:class="login_mobile && login_pwd ? 'selected' : ''">登录</span></p>
                    <p>
                        <span @click="getSmsLogin()">手机号登录</span>
                        <span @click="getBackPwd()">找回密码</span>
                    </p>
                </form>
                <!--找回密码-->
                <form action="" id="form_2" v-if="login3">
                    <p>
                        <input type="text" placeholder="手机号" v-model="back_mobile" class="test1">
                        <img src="./image/blue_phone.png" alt="">
                        <span id="back_get_code" @click="getSmsCode(2, 'back_get_code')">获取验证码</span>
                    </p>
                    <p>
                        <input type="text" placeholder="验证码" v-model="back_code" class="test">
                        <img src="./image/blue_yan.png" alt="">
                    </p>
                    <p>
                        <input v-bind:type="back_is_show ? 'text' : 'password'" placeholder="新密码" v-model="back_pwd" class="test">
                        <img src="./image/blue_psd.png" alt="">
                        <img src="./image/blue_yin.png" alt="" v-if="passd" @click="pwdIsShow(2)">
                        <img src="./image/kesi.png" alt="" v-if="psd" @click="pwdIsShow(2)">
                    </p>
                    <p><span @click="backPwd()" v-bind:class="back_mobile && back_code && back_pwd ? 'selected' : ''">完成</span></p>
                    <p>
                        <span>未收到验证码？</span>
                    </p>
                </form>
                <!--手机号没有被注册新用户注册得到密码-->
                <form action="" id="form_3" v-if="login4">
                    <p>
                        <input type="text" placeholder="手机号" disabled v-model="login_mobile" class="test1">
                        <img src="./image/blue_phone.png" alt="">
                    </p>
                    <p>
                        <input v-bind:type="pwd_is_show ? 'text' : 'password'" placeholder="输入密码" v-model="pwd" class="test">
                        <img src="./image/blue_psd.png" alt="">
                        <img src="./image/blue_yin.png" alt="" v-if="p3" @click="pwdIsShow(3)">
                        <img src="./image/kesi.png" alt="" v-if="p4" @click="pwdIsShow(3)">
                    </p>
                    <p>
                        <input v-bind:type="confirm_is_show ? 'text' : 'password'" placeholder="确认密码" v-model="confirm_pwd" class="test">
                        <img src="./image/blue_psd.png" alt="">
                        <img src="./image/blue_yin.png" alt="" v-if="p1" @click="pwdIsShow(4)">
                        <img src="./image/kesi.png" alt="" v-if="p2" @click="pwdIsShow(4)">
                    </p>
                    <p><span @click="addPwd()" v-bind:class="pwd && confirm_pwd ? 'selected' : ''">保存</span></p>
                </form>

            </div>
            <div class="login_foot" v-if="new_psd">
                <span>登录即代表您已经同意<time>《小马生鲜注册协议》</time></span>
                <div class="login_x">
                    <time></time>
                    <a>合作账户登录</a>
                    <time></time>
                </div>
                <div class="login_d">
                    <img src="./image/xia_1.jpg" alt="">
                    <img src="./image/s_a.jpg" alt="">
                </div>
            </div>
            <div class="login_img" v-if="imgs">
                <div> <img src="./image/blue_we.png" alt=""></div>
                <div><img src="./image/QQ.png" alt=""></div>
                <div> <img src="./image/blue_weibo.png" alt=""></div>
                <div><img src="./image/blue_zhi.png" alt=""></div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        name:'login',
        components:{
        },
        data(){
            return{
                a:2,
                p3:true,
                p4:false,
                p1:true,
                p2:false,
                login4:false,
                login3:false,
                new_psd:true,
                login2:false,
                passd:true,
                psd:false,
                pwd_passd:true,
                pwd_psd:false,
                login1:true,
                im:true,
                imgs:true,
                b1:'手机号快捷登录',
                index:60,
                login_status:1,
                back_status:1,
                login_mobile:'',
                login_code:'',
                pwd:'',
                confirm_pwd:'',
                login_pwd:'',
                login_is_show:0,
                pwd_is_show:0,
                confirm_is_show:0,
                back_is_show:0,
                back_mobile:'',
                back_code:'',
                back_pwd:'',
            }
        },
        mounted:function(){
            //this.index = 1;

            //监听enter事件
            let that = this;
            $(document).keypress(function(e) {  
                // 回车键事件  
                   if(e.which == 13) {  
                        that.pwdLogin();
                   }  
            }); 

        },
        methods:{
            getFan:function(){
                window.history.go(-2);
            },
            /*点击获取验证码*/
            getSmsCode:function(type, id){
                if (type == 1) {
                    if (this.back_status != 1) {
                        alert('请勿频繁获取验证码！');
                        return false;
                    }
                } else {
                    if (this.login_status != 1) {
                        alert('请勿频繁获取验证码！');
                        return false;
                    }
                }

                var mobile = type == 1 ? this.login_mobile : this.back_mobile;
                var myreg = /^(((13[\d]{1})|(14[5,7]{1})|(15[^4]{1})|(17[0,6,7,8]{1})|(18[\d]{1}))+\d{8})$/;
                if (! mobile) {
                    alert('请输入手机号！');
                    return false;
                } else if (! myreg.test(mobile)) {
                    alert('请输入有效' +
                        '的手机号码！');
                    return false;
                }

                if ((type == 1 ? this.login_status : this.back_status) != 1) return false;

                if (type == 1) {
                    this.login_status = 0;
                } else {
                    this.back_status = 0;
                }

                let that=this;
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Login.php?mode=sendSms',
                    {
                        params: {
                            'mobile':mobile,
                            'type':type,
                        },
                        jsonp:'callback'
                    }
                ).then(function (res) {
                    alert(res.body.msg);

                    if (res.body.code == 200) {
                        that.index = 60;
                        var time=setInterval(function(){
                            $('#' + id).css({'background':'#bebebe','color':'#fff'});
                            $('#' + id).text(that.index+"s后重发");
                            that.index--;
                            if(that.index<0){
                                clearInterval(time)
                                $('#' + id).css({'background':'#ff7d01','color':'#fff'});
                                $('#' + id).text('获取验证码');
                                that.index = 60;

                                if (type == 1) {
                                    that.login_status = 1;
                                } else {
                                    that.back_status = 1;
                                }

                            }
                        },1000);
                    } else {
                        if (type == 1) {
                            that.login_status = 1;
                        } else {
                            that.back_status = 1;
                        }
                    }
                });
            },
            /*点击手机号切换到初始登录状态*/
            getSmsLogin:function(){
                this.login1=true;
                this.login2=false;
            },
            /*完善密码提交操作*/
            addPwd:function(){
                var len = this.pwd.length;
                if (! (len > 0)) {
                    alert('请填写密码！');
                    return false;
                } else if (len > 16 || len < 8) {
                    alert('密码只能为8~16位！');
                    return false;
                }

                if (this.pwd != this.confirm_pwd) {
                    alert('两次密码输入不一致！');
                    return false;
                }

                let back_url = this.$route.query.back_url; 
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Login.php?mode=setPwd',
                    {
                        params: {
                            'uid':this.GLOBAL.getCookie('uid'),
                            'time':this.GLOBAL.getCookie('time'),
                            'token':this.GLOBAL.getCookie('token'),
                            'pwd':this.pwd,
                            'confirm_pwd':this.confirm_pwd,
                        },
                        jsonp:'callback'
                    }
                ).then(function (res) {
                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }
                    if(back_url){
                         this.$router.push(back_url);
                    }else{
                         this.$router.push('/center');
                    }
                   
                });
            },
            /*手机验证码登录提交*/
            smsLogin:function(){
                var myreg = /^(((13[\d]{1})|(14[5,7]{1})|(15[^4]{1})|(17[0,6,7,8]{1})|(18[\d]{1}))+\d{8})$/;
                if (! (this.login_mobile && this.login_code)) {
                    alert('信息请填写完整！');
                    return false;
                } else if (! myreg.test(this.login_mobile)) {
                    alert('请输入有效的手机号码！');
                    return false;
                }

                let back_url = this.$route.query.back_url; 
                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Login.php?mode=mobile_login',
                    {
                        params: {
                            mobile:this.login_mobile,
                            sms_code:this.login_code,
                            session_id:this.GLOBAL.getCookie('user_cart_id'),
                            back_url:back_url,
                        },
                        jsonp:'callback'
                    }
                ).then(function (res) {
                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }

                    this.GLOBAL.setCookie('uid', res.body.data.data.uid);
                    this.GLOBAL.setCookie('time', res.body.data.data.time);
                    this.GLOBAL.setCookie('token', res.body.data.data.token);

                    if (res.body.data.data.is_pwd == 1) {
                        this.$router.push('/center');
                    } else {
                        this.login1=false;
                        this.login4=true;
                        this.new_psd=false;
                        this.b1='账号登录'
                    }
                });
            },
            /*找回密码数据提交操作*/
            backPwd:function(){
                if (! (this.back_mobile && this.back_pwd && this.back_code)) {
                    alert('请填写完整信息！');
                    return false;
                }

                var myreg = /^(((13[\d]{1})|(14[5,7]{1})|(15[^4]{1})|(17[0,6,7,8]{1})|(18[\d]{1}))+\d{8})$/;
                if (! myreg.test(this.login_mobile)) {
                    alert('请输入有效的手机号码！');
                    return false;
                }

                var len = this.back_pwd.length;
                if (len > 16 || len < 8) {
                    alert('密码只能为8~16位！');
                    return false;
                }

                if (this.back_pwd.length != 6) {
                    alert('验证码错误！');
                    return false;
                }

                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Login.php?mode=backPwd',
                    {
                        params: {
                            mobile:this.back_mobile,
                            pwd:this.back_pwd,
                            sms_code:this.back_code,
                            session_id:this.GLOBAL.getCookie('user_cart_id')
                        },
                        jsonp:'callback'
                    }
                ).then(function (res) {
                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }

                    this.$router.push('/center');
                });
            },
            /*找回新密码页面*/
            getBackPwd:function(){
                this.login3=true;
                this.login2=false;
                this.b1='手机快捷登录'
            },
            /*进入手机密码登录页*/
            getPwdLogin:function(){
                this.login1=false;
                this.login2=true;
            },
            // 密码明文密文切换
            pwdIsShow:function(type){
                switch (type) {
                    case 1:
                        if (this.login_is_show == 1) {
                            this.login_is_show = 0;
                            this.pwd_passd=true;
                            this.pwd_psd=false;
                        } else {
                            this.login_is_show = 1;
                            this.pwd_passd=false;
                            this.pwd_psd=true;
                        }
                        break;
                    case 2:
                        if (this.back_is_show == 1) {
                            this.back_is_show = 0;
                            this.passd=true;
                            this.psd=false;
                        } else {
                            this.back_is_show = 1;
                            this.passd=false;
                            this.psd=true;
                        }
                        break;
                    case 3:
                        if (this.pwd_is_show == 1) {
                            this.pwd_is_show = 0;
                            this.p3=false;
                            this.p4=true;
                        } else {
                            this.pwd_is_show = 1;
                            this.p3=true;
                            this.p4=false;
                        }
                        break;
                    case 4:
                        if (this.confirm_is_show == 1) {
                            this.confirm_is_show = 0;
                            this.p2=false;
                            this.p1=true;
                        } else {
                            this.confirm_is_show = 1;
                            this.p2=true;
                            this.p1=false;
                        }
                        break;
                }
            },
                /*  $('.test').attr('placeholder','请输入企业名')动态改变playholder的属性*/
            // 密码登录提交处理
            pwdLogin:function () {
                if (! (this.login_mobile && this.login_pwd)) {
                    alert('信息请填写完整！');
                    return false;
                }

                var myreg = /^(((13[\d]{1})|(14[5,7]{1})|(15[^4]{1})|(17[0,6,7,8]{1})|(18[\d]{1}))+\d{8})$/;
                if (! myreg.test(this.login_mobile)) {
                    alert('请输入有效的手机号码！');
                    return false;
                }

                var len = this.login_pwd.length;
                if (! (len > 0)) {
                    alert('请填写密码！');
                    return false;
                } else if (len > 16 || len < 8) {
                    alert('密码只能为8~16位！');
                    return false;
                }

                this.$http.jsonp(
                    this.GLOBAL.BaseUrl+'/mobile/api/v1/Login.php?mode=pwd_login',
                    {
                        params: {
                            mobile:this.login_mobile,
                            password:this.login_pwd,
                            session_id:this.GLOBAL.getCookie('user_cart_id')
                        },
                        jsonp:'callback'
                    }
                ).then(function (res) {
                    if (res.body.code != 200) {
                        alert(res.body.msg);
                        return false;
                    }

                    this.GLOBAL.setCookie('uid', res.body.data.data.uid);
                    this.GLOBAL.setCookie('time', res.body.data.data.time);
                    this.GLOBAL.setCookie('token', res.body.data.data.token);

                    this.$router.push('/center');
                });
            },
        }
    }
</script>
<style>
    /*form_3*/
    #form_3 p:nth-of-type(4) span{
        width:5rem;
        height:0.68rem;
        display:block;
        color:#ffffff;
        background:#bebebe;
        font-size:0.3rem;
        line-height:0.68rem;
        text-align:center;
        margin:0.47rem auto;
        border-radius:0.05rem;
    }
    #form_3 p:nth-of-type(4) span.selected{
        background-color: #35b2fc;
    }
    #form_3 p:nth-of-type(4){
        width:5.1rem;
        height:1.17rem;
    }
    #form_3 p:nth-of-type(3){
        width:5.1rem;
        height:0.54rem;
        border-bottom:0.01rem solid #9cd9fe;
        position:relative;
        padding-top:0.45rem;
    }
    #form_3 p:nth-of-type(3) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
       /* line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #form_3 p:nth-of-type(3) img:nth-of-type(1){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        left:0;
        top:0.5rem;
    }
    #form_3 p:nth-of-type(3) img:nth-of-type(2){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        right:0;
        top:0.5rem;
    }
    #form_3 p:nth-of-type(3) img:nth-of-type(3){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        right:0;
        top:0.5rem;
    }
    .test::-webkit-input-placeholder{
        color:#d1d1d2;
        font-size:0.2rem;
    }
    #form_3 p:nth-of-type(2) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
        /*line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }

    #form_3 p:nth-of-type(2) img:nth-of-type(1){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        left:0;
        top:0.5rem;
    }
    #form_3 p:nth-of-type(2) img:nth-of-type(2){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        right:0;
        top:0.5rem;
    }
    #form_3 p:nth-of-type(2) img:nth-of-type(3){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        right:0;
        top:0.5rem;
    }
    #form_3 p:nth-of-type(2){
        width:5.1rem;
        height:0.54rem;
        border-bottom:0.01rem solid #9cd9fe;
        position:relative;
        padding-top:0.45rem;
    }
    #form_3 p:nth-of-type(1) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
        /*line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #form_3 p:nth-of-type(1){
        width:5.1rem;
        height:0.55rem;
        border-bottom:0.01rem solid #9cd9fe;
        position:relative;
        padding-top:0.2rem;
    }
    #form_3 p:nth-of-type(1) img{
        display:block;
        width:0.3rem;
        height:0.53rem;
        position:absolute;
        top:0.14rem;
        left:0;
    }
    #form_3{
        width:5.1rem;
        height:4.4rem;
        display:block;
        margin:0 auto;
        /*  background:red;*/
    }
    /*form_2*/

    #form_2 p:nth-of-type(5) span:nth-of-type(1){
        height:0.3rem;
        float:right;
        /*line-height:0.83rem;*/
        font-size:0.22rem;
        color:#7ac7fb;
        font-weight:700;
    }
    #form_2 p:nth-of-type(5){
        width:5.1rem;
        height:0.83rem;
    }
    #form_2 p:nth-of-type(4) span{
        width:5rem;
        height:0.68rem;
        display:block;
        color:#ffffff;
        background:#bebebe;
        font-size:0.3rem;
        line-height:0.68rem;
        text-align:center;
        margin:0.47rem auto;
        border-radius:0.05rem;
    }
    #form_2 p:nth-of-type(4) span.selected{
        background-color: #35b2fc;
    }
    #form_2 p:nth-of-type(4){
        width:5.1rem;
        height:1.17rem;
    }
    #form_2 p:nth-of-type(3){
        width:5.1rem;
        height:0.54rem;
        border-bottom:0.01rem solid #9cd9fe;
        position:relative;
        padding-top:0.45rem;
    }
    #form_2 p:nth-of-type(3) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
       /* line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #form_2 p:nth-of-type(3) img:nth-of-type(1){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        left:0;
        top:0.45rem;
    }
    #form_2 p:nth-of-type(3) img:nth-of-type(2){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        right:0;
        top:0.5rem;
    }
    #form_2 p:nth-of-type(3) img:nth-of-type(3){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        right:0;
        top:0.5rem;
    }
    .test::-webkit-input-placeholder{
        color:#d1d1d2;
        font-size:0.2rem;
    }
    #form_2 p:nth-of-type(2) input{
        width:5.1rem;
        height:0.54rem;
        display:block;
        outline: none;
        border:0;
     /*   line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #form_2 p:nth-of-type(2) img{
        display:block;
        width:0.38rem;
        height:0.39rem;
        position:absolute;
        left:0;
        top:0.5rem;
    }
    #form_2 p:nth-of-type(2){
        width:5.1rem;
        height:0.54rem;
        border-bottom:0.01rem solid #9cd9fe;
        position:relative;
        padding-top:0.45rem;
    }
    .test1::-webkit-input-placeholder{
        color:#d1d1d2;
        /*font-size:0.2rem;*/
        font-size:0.22rem;
    }
    #form_2 p:nth-of-type(1) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
      /*  line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #form_2 p:nth-of-type(1) span{
        display:block;
        position:absolute;
        width:1.43rem;
        height:0.45rem;
        background:#45b8fd;
        color:#ffffff;
        line-height:0.45rem;
        text-align:center;
        font-size:0.2rem;
        border-radius:0.05rem;
        top:0.2rem;
        right:0;
    }
    #form_2 p:nth-of-type(1){
        width:5.1rem;
        height:0.55rem;
        border-bottom:0.01rem solid #9cd9fe;
        position:relative;
        padding-top:0.2rem;
    }
    #form_2 p:nth-of-type(1) img{
        display:block;
        width:0.42rem;
        height:0.42rem;
        position:absolute;
        top:0.14rem;
        left:0;
    }
    #form_2{
        width:5.1rem;
        height:4.4rem;
        display:block;
        margin:0 auto;
        /*  background:red;*/
    }
    /*form_1*/
    #form_1 p:nth-of-type(4) span:nth-of-type(1){
        height:0.75rem;
        float:left;
        line-height:0.75rem;
        font-size:0.2rem;
        color:#88ccfd;
        font-weight:700;
    }
    #form_1 p:nth-of-type(4) span:nth-of-type(2){
        height:0.75rem;
        float:right;
        line-height:0.75rem;
        font-size:0.2rem;
        color:#88ccfd;
        font-weight:700;
    }
    #form_1 p:nth-of-type(4){
        width:5.1rem;
        height:0.75rem;
    }
    #form_1 p:nth-of-type(3) span{
        width:5rem;
        height:0.68rem;
        display:block;
        color:#ffffff;
        background:#bebebe;
        font-size:0.3rem;
        line-height:0.68rem;
        text-align:center;
        margin:0.47rem auto;
        border-radius:0.05rem;
    }
    #form_1 p:nth-of-type(3) span.selected{
        background-color:#35b2fc;
    }
    #form_1 p:nth-of-type(3){
        width:5.1rem;
        height:1.17rem;
    }
    #form_1 p:nth-of-type(2) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
       /* line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #form_1 p:nth-of-type(2) img:nth-of-type(1){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        left:0;
        top:0.5rem;
    }
    #form_1 p:nth-of-type(2) img:nth-of-type(2){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        right:0;
        top:0.5rem;
    }
    #form_1 p:nth-of-type(2) img:nth-of-type(3){
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        right:0;
        top:0.5rem;
    }
    #form_1 p:nth-of-type(2){
        width:5.1rem;
        height:0.54rem;
        border-bottom:0.01rem solid #9cd9fe;
        position:relative;
        padding-top:0.45rem;
        margin-bottom:1rem;
    }
    #form_1 p:nth-of-type(1) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
       /* line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #form_1 p:nth-of-type(1){
        width:5.1rem;
        height:0.55rem;
        border-bottom:0.01rem solid #9cd9fe;
        position:relative;
        padding-top:0.2rem;
    }
    #form_1 p:nth-of-type(1) img{
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        top:0.14rem;
        left:0;
    }
    #form_1{
        width:5.1rem;
        height:4.4rem;
        display:block;
        margin:0 auto;
        /*  background:red;*/
    }
    /*1*/
    .login_img div img{
        width:0.6rem;
        height:0.6rem;
        display:block;
        margin:0 auto;
    }
    .login_img div{
        flex:1;
        display:block;
        margin:auto;

    }
    .login_img{
        width:5.26rem;
        height:0.7rem;
       /* display:flex;*/
        margin:0 auto;
        /*暂时隐藏掉*/
        display:none;
    }
    .login_d{
        display:none;
        width:5.26rem;
        margin:auto;
        min-height:0.37rem;
        position:relative;
        /*-webkit-transform:rotate(180deg);
        -moz-transform:rotate(180deg);
        transform:rotate(180deg);*/
    }
    .login_d img:nth-of-type(1){
        display:none;
        width:0.33rem;
        height:0.18rem;
        position:absolute;
        left:2.4rem;
        top:0;
    }
    .login_d img:nth-of-type(2){
        display:none;
        width:0.34rem;
        height:0.17rem;
        position:absolute;
        left:2.51rem;
        top:0;
    }
    .login_x a{
        display:block;
        width:1.73rem;
        height:0.49rem;
        font-size:0.22rem;
        color:#56c0fd;
        line-height:0.49rem;
        text-align:center;
        position:absolute;
        text-decoration: none;
        left:1.76rem;
        top:-0.25rem;
        /*  background:#fefefe;*/
    }
    .login_x{
        width:5.26rem;
        height:0.49rem;
        position:relative;
        margin:auto;
    }
    .login_x time:nth-of-type(1){
        border-bottom:0.01rem solid #87d1fc;
        /* margin:0.24rem auto;*/
        width:1.79rem;
        display:block;
        float:left;
    }
    .login_x time:nth-of-type(2){
        border-bottom:0.01rem solid #87d1fc;
        /* margin:0.24rem auto;*/
        width:1.79rem;
        display:block;
        float:right;
    }
    .login_foot span:nth-of-type(1){
        display:block;
        width:5.26rem;
        line-height:0.6rem;
        text-align:center;
        height:0.6rem;
        color:#72c0fe;
        font-size:0.2rem;
        margin-bottom:0.1rem;
    }
    .login_foot span:nth-of-type(1) time{
        text-decoration: underline;
        cursor: pointer;
    }
    .login_foot{
        width: 5.26rem;
        height: 1.5rem;
        padding-top: 0.5rem;
        margin: 0 auto;
        /*暂时隐藏*/
        display:none;
    }
    #form p:nth-of-type(5) span:nth-of-type(1){
        height:0.83rem;
        float:left;
        line-height:0.83rem;
        font-size:0.22rem;
        color:#50bafc;
        font-weight:700;
    }
    #form p:nth-of-type(5) span:nth-of-type(2){
        height:0.83rem;
        float:right;
        line-height:0.83rem;
        font-size:0.22rem;
        color:#50bafc;
        font-weight:700;
    }
    #form p:nth-of-type(5){
        width:5.1rem;
        height:0.83rem;
    }
    #form p:nth-of-type(4) span{
        width:5rem;
        height:0.68rem;
        display:block;
        color:#ffffff;
        background:#bebebe;
        font-size:0.3rem;
        line-height:0.68rem;
        text-align:center;
        margin:0.47rem 0 0 0;
        border-radius:0.05rem;
    }
    #form p:nth-of-type(4) span.selected{
        background-color:#35b2fc;
    }
    #form p:nth-of-type(4){
        width:5.1rem;
        height:0.7rem;
    }
    #form p:nth-of-type(3){
        width:5.12rem;
        height:0.67rem;
        line-height:0.67rem;
        font-size:0.18rem;
        color:#b1afaf;
    }
    .test::-webkit-input-placeholder{
        color:#d1d1d2;
        /*font-size:0.2rem;*/
        font-size:0.22rem;
    }
    #form p:nth-of-type(2) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
      /*  line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #form p:nth-of-type(2) img{
        display:block;
        width:0.38rem;
        height:0.39rem;
        position:absolute;
        left:0;
        top:0.5rem;
    }
    #form p:nth-of-type(2){
        width:5.1rem;
        height:0.54rem;
        border-bottom:0.01rem solid #9cd9fe;
        position:relative;
        padding-top:0.45rem;
    }
    #form p:nth-of-type(1) input{
        width:5.1rem;
        height:0.55rem;
        display:block;
        outline: none;
        border:0;
      /*  line-height:0.2rem;*/
        background:none;
        text-indent: 0.9rem;
    }
    #form p:nth-of-type(1) span{
        display:block;
        position:absolute;
        width:1.43rem;
        height:0.45rem;
        background:#35b2fc;
        color:#ffffff;
        line-height:0.45rem;
        text-align:center;
        font-size:0.2rem;
        border-radius:0.05rem;
        top:0.2rem;
        right:0;
    }
    #form p:nth-of-type(1){
        width:5.1rem;
        height:0.55rem;
        border-bottom:0.01rem solid #9cd9fe;
        position:relative;
        padding-top:0.2rem;
    }
    #form p:nth-of-type(1) img{
        display:block;
        width:0.42rem;
        height:0.42rem;
        position:absolute;
        top:0.14rem;
        left:0;
    }
    #form{
        width:5.1rem;
        height:4.4rem;
        display:block;
        margin:0 auto;
        /*  background:red;*/
    }
    .form_con{
        height:4.4rem;
        width:100%;
        padding-top:1.85rem;
    }
    .login_top{
        height:0.75rem;
        width:100%;
        position:relative;
    }
    .login_top img{
        height:0.36rem;
        width:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .login_top h4{
        height:0.75rem;
        color:#2eaffc;
        font-size:0.24rem;
        line-height:0.75rem;
        text-align:center;
        font-weight:normal;
    }
    .login_con{
        width:100%;
        height:11.4rem;
        background:url(image/login.png) no-repeat;
        background-size:cover;
    }
</style>



